<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		var category = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				
				Type : "column",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
		    
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			
		    Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정
		    },
		    
		    XAxis: {
                categories: category
            },
            
		    YAxis : {
		    	allowDecimals: false,
                min: 0,
		        Title : {
		            Text : ""
		        }
		    },
		    
		    plotOptions: {
		    	column:{
		    		Stacking:true
		    	}
            },
            
            tooltip: {
                formatter: function() {
                	return '<b>'+ category[this.x] +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
                }
            },
		}
		
		myChart.SetOptions(cfg);
		
		myChart.SetSeriesOptions([{
			name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        	}, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        	}, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        	}, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
		}]);
		
// 		myChart.DoSearch("../data/chartdata_bar_group.json");
		myChart.Draw();
	});
	
</script>
<title>Stacked and grouped column 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">Stacked and grouped column 예제</div>
	<div id="desc">
		column 타입으로 설정 후, Staking 기능에서 Stack 이름을 주어 그룹을 형성하여
		조회된 데이터를 차트에 좌우로 나눠서 표현한다.
	</div>

	<div id="functionArea">
		chart: {<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;Type : "column",<br>
	    }<br>
	    <br>
	    plotOptions: {<br><font color="#FF0000">
		&nbsp;&nbsp;&nbsp;&nbsp;column:{<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stacking:true<br>
		&nbsp;&nbsp;&nbsp;&nbsp;}</font><br>
        }
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>